import { Chart } from "@antv/g2";
import { MarkNode } from "@antv/g2/lib/api/mark";
import { cloneDeep } from "lodash";

export class Box5 {
    chart?: Chart;
    width: number;
    height: number
    mark?: MarkNode;
    mark1?: MarkNode;
    constructor(width: string, height: string) {
        this.width = parseInt(width)
        this.height = parseInt(height) - 80
    }
    init() {
        const { width, height } = this
        this.chart = new Chart({
            container: document.getElementById('box5') as HTMLElement,
            width, height,
            theme: 'classicDark'
        })
        this.chart.coordinate({ type: 'theta', innerRadius: 0.5, outerRadius: 0.8, startAngle: Math.PI / 2, endAngle: Math.PI / 2 });
        this.mark1 = this.chart.data([]).interval()
            .legend('color', {
                itemLabelFill: '#fff', itemLabelFontSize: 18, cols: 1, itemLabelFillOpacity: 1,
                itemMarkerSize: 20, colPadding: 10
            })
            .animate('enter', { type: 'waveIn' })
            .animate('update', { type: 'waveIn' })
            .animate('exit', { type: 'waveIn' })
            .transform({ type: 'stackY' })
            .encode('y', 'value')
            .encode('size', width)
            .encode('color', 'name')
            .scale('color', {
                range: ['#0061df', '#fbe744'],
            }).label({
                text: (data: { name: string, value: number }) => data.name + ':' + data.value,
                position: 'spider',
                fillOpacity: 1,
                connector: false,
                style: {
                    fontSize: 16
                },
                transform: [
                    {
                        type: 'exceedAdjust',
                    },
                ],
            }).style('radius', 15).style('minHeight', 10)
            .style('cursor', 'pointer').tooltip({ items: [(data: { name: string, value: number }) => data.name + ':' + data.value] })
        this.chart.render();
    }
    async changeData(data: any, total: number) {
        if (total === 0) {
            this.chart?.changeData([
                { name: '上转检查', value: 1 },
                { name: '上转检验', value: 1 }
            ])
            this.mark1?.tooltip({ items: [(data: { name: string, value: number }) => data.name + ':' + 0] })
        } else {
            const r = cloneDeep(data)
            r[0].value += 400
            r[1].value += 416
            this.chart?.changeData(r)
        }
    }
}